<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
	<meta charset="utf-8">
	<title>分类新增\编辑</title>
	<meta th:replace="admin/template/head.html"/>
</head>
<body>
<h3 style="color:red;font-size:16px;padding:20px;">这里是分类管理</h3>
<form class="layui-form" action="" id="form1">
	<br>
	<div class="layui-form-item" style="display: none;">
		<div class="layui-inline">
			<label class="layui-form-label">ID</label>
			<div class="layui-input-inline">
				<input type="text" name="id" id="id" th:value="${data?.id}" autocomplete="off" class="layui-input" readonly>
			</div>
		</div>
	</div>
	<div class="layui-form-item">
		<div class="layui-inline">
			<label class="layui-form-label">分类名称</label>
			<div class="layui-input-inline">
				<input type="text" name="title" id="title" th:value="${data?.title}" autocomplete="off" placeholder="请输入分类名称" class="layui-input">
			</div>
		</div>
	</div>

	<!--************************************图片************************************************************-->
	<div class="layui-form-item">
		<div class="layui-inline">
			<label class="layui-form-label">封面图</label>
			<div class="layui-input-block">
				<div class="">
					<div class="layui-input-inline">
						<input type="text" class="layui-input" name="cover" id="cover" th:value="${data?.cover}" readonly>
					</div>
					<div class="layui-form-mid c-red">注意，这行有内容图片上传才算成功！！</div>
				</div>
				<div class="layui-upload-drag" id="upload">
					<i class="layui-icon"></i>
					<p>点击上传，或将文件拖拽到此处</p>
					<div th:class="${data?.cover}? '' : 'layui-hide'" id="uploadDemoView">
						<hr>
						<img th:src="${uriPrefix + data?.cover}" alt="上传成功后渲染" style="width: 400px">
					</div>
				</div>
			</div>
		</div>
	</div>
	<div class="layui-form-item">
		<div class="layui-input-block">大小不限，自动按70%品质压缩，并按宽度4000像素等比缩小</div>
	</div>
</form>
<div class="layui-form-item">
	<div class="layui-input-block">
		<button type="submit" onclick="doSave()" class="layui-btn" lay-submit="" lay-filter="demo1">立即提交</button>
		<button type="reset" class="layui-btn layui-btn-primary" onclick="resetForm()">重置</button>
	</div>
</div>

<!-- 注意：如果你直接复制所有代码到本地，上述 JS 路径需要改成你本地的 -->
<script>
	let $, layer;
	layui.use(['form', 'layer', 'upload'], function() {
		$ = layui.jquery;
		layer = layui.layer;
		const upload = layui.upload;
		upload.render({
			elem: '#upload'
			,acceptMime: 'image/*'
			,size: 999999
			,field: 'files'
			,accept: 'images'
			,data: {type: 'category'}
			,url: '/upload'
			,before: function(obj){
				//预读本地文件示例，不支持ie8
				obj.preview(function(index, file, result){
					$('#uploadDemoView').removeClass('layui-hide').find('img').attr('src', result)
				});
			}
			,done: function(res){
                layer.msg(res.msg);
				if(res.code == 0) {
					$('#cover').val(res.data[0]);
				}
			}
		});
	});

	function doSave() {
		// const data = $("#form1").serialize();
		const data = {
			id: $('#id').val(),
			title: $('#title').val(),
			cover: $('#cover').val()
		}
		if(!data.title) {
            layer.msg('请输入分类名称');
            return false;
        }
        if(!data.cover) {
            layer.msg('必须上传图片');
            return false;
        }
		$.post('/category/edit', data, (res) => {
			if(res.code == 0 && res.data > 0) {
				parent.layer.alert(res.msg, {yes: function () {
					parent.layer.closeAll();
					window.parent.location.reload();
				}});
			} else {
				layer.msg(res.msg);
			}

		})
	}
	const resetForm = ()=> {
		location.reload();
	}
</script>

</body>
</html>